<template>
  <div class="main-container">
    <a-carousel class="carousel" :style="{height: carouselHeight+'px'}">
      <a-carousel-item v-for="image in images">
        <img class="carousel__img" :src="image" alt="">
      </a-carousel-item>
    </a-carousel>
    <div>

    </div>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

const images = [
  'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
];

const carouselHeight = computed(() => {
  return Number((window.innerWidth * 0.85 / 3).toFixed(0))
});
</script>

<style lang="less" scoped>
.carousel {
  border-radius: 5px;

  &__img {
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    object-fit: contain;
  }
}
</style>
